<template>
    <el-container class="home-container">
        <el-button type="info" @click="logout">退出</el-button>
        <el-header>学生成绩管理系统</el-header>
        <el-container>
            <el-aside width="200px">
                <!--侧边栏菜单区域-->
                <el-menu v-on:unique-opened="true"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b" unique-opened router><!--这个是选中的时候显示的颜色-->
                    <!--                    unique-opened="true" router="true"，这里省略了true，不然会有奇奇怪怪的报错-->
                    <!--                    router="true"表示左侧导航栏开启了路由模式     -->
                    <!--unique-opened="true"说明每次菜单只能打开一个-->
                    <!--一级菜单-->
                    <el-menu-item index="/firsthop" @click="saveNavState('/'+$route.path)">
                        <i class="el-icon-menu"></i>
                        <span slot="title" >首页</span>
                    </el-menu-item>
                    <el-submenu index="1" :disabled="entranceForStu">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>学生</span>
                        </template>
                        <el-menu-item-group>
                            <!--去/stu_search，先要在router的index里面注册,用index在顶端显示，用@click来跳转到这个页面，但是当前跳转到的是一个新的页面-->
                            <el-menu-item index="/myGrade" @click="saveNavState('/'+$route.path)">我的成绩</el-menu-item>
                        </el-menu-item-group>s
                    </el-submenu>
                    <el-submenu index="2" :disabled="entranceForTeacher">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>教师</span>
                        </template>
                        <el-menu-item index="/myStuGrade" @click="saveNavState('/'+$route.path)">
                            <i class="el-icon-menu"></i>
                            <span slot="title" >查看学生成绩</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="3" :disabled="entranceForAdmin">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>管理员</span>
                        </template>
                        <el-menu-item index="/classGrade" @click="saveNavState('/'+$route.path)">班级成绩</el-menu-item>
                        <el-menu-item index="/allGrade" @click="saveNavState('/'+$route.path)">全部成绩</el-menu-item>
<!--                        <el-menu-item  index="/teacherList" @click="saveNavState('/'+$route.path)">-->
<!--                            <span slot="title" >教师列表</span>-->
<!--                        </el-menu-item>-->
                        <el-menu-item  index="/studentList" @click="saveNavState('/'+$route.path)">
                            <span slot="title" >学生列表</span>
                        </el-menu-item>
<!--                        <el-menu-item  index="/toExamine" @click="saveNavState('/'+$route.path)">-->
<!--                            <span slot="title" >审核代办</span>-->
<!--                        </el-menu-item>-->
                        <el-menu-item index="/classStu" @click="saveNavState('/'+$route.path)">
                            <span slot="title" >班级列表</span>
                        </el-menu-item>
<!--                        <el-submenu index="31">-->
<!--                            <template slot="title">-->
<!--                                <span>权限管理</span>-->
<!--                            </template>-->
<!--                            <el-menu-item-group>-->
<!--                                <el-menu-item index="/roles" @click="saveNavState('/'+$route.path)" >角色列表</el-menu-item>-->
<!--                                <el-menu-item index="/rights" @click="saveNavState('/'+$route.path)">权限列表</el-menu-item>-->
<!--                            </el-menu-item-group>-->
<!--                        </el-submenu>-->
                    </el-submenu>

<!--                    <el-menu-item index="/pic1" @click="saveNavState('/'+$route.path)">-->
<!--                        <i class="el-icon-menu"></i>-->
<!--                        <span slot="title" >pic1</span>-->
<!--                    </el-menu-item>-->


                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <!--路由占位符-->
                    <!--在router的index.js里面实现，这里跳转到firsthop页面-->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>
<script>
    export default {
        created(){
            if(this.GLOBAL.currentUser.role_name==="管理员")
            {
                this.entranceForAdmin=false;
            }
            else if(this.GLOBAL.currentUser.role_name==="教师")
            {
                this.entranceForTeacher=false;
            }
            else if(this.GLOBAL.currentUser.role_name==="学生")
            {
                this.entranceForStu=false;
            }
        },
        name: "home",
        data(){
            return{
                entranceForTeacher:true,//true表示没法访问
                entranceForAdmin:true,
                entranceForStu:true,
            };
        },
        methods:{
            logout(){
                window.sessionStorage.clear()//删除这个token
                this.$router.push("/login")//返回登录界面
            },
            //保存链接的激活状态
            saveNavState(activepath){//为每一个按钮添加，按下去的时候会在Application里面加入一个activepath
                window.sessionStorage.setItem('activepath',activepath)//用来保存当前访问的路径
            }
            // 请求左侧菜单
            // async getMenuList(){
            //     const { data: res } = await this.$http.get('menus')
            //     console.log(res);
            // }
        }
    }
</script>

<style scoped>
    .el-header{
        background-color: #319595;
        font-size:20px;

    }
    .el-aside{
        background: linear-gradient(135deg,rgb(57,167,176),rgb(56,183,145));
    }
    .el-menu{
        border-right:none;/*解决2级菜单突出来的情况*/
    }
    .el-main{
        background-color: white;
    }
    .home-container{
        height: 100vh;
    }
    .el-header{
        font-family :"幼圆";
        font-size :40px;
    }
</style>
